<template>
  <div>
    <!-- <Countdown></Countdown> -->
    <!-- 计时器 -->
    <Timer
      :value="time"
      ref="timerRef"
      :maxTime="10"
      backgroundColor="#333"
      color="#fff"
      :isColon="false"
      @end="endTimer"
    ></Timer>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
    <button @click="resetTimer">重置</button>

    <br />
    <br />
    <DivideList :list="divideList"></DivideList>
    <!-- <br />
    <br /> -->
    <!-- canvas 一次只能画一个 ,如果要画多个，就设置不同的canvasId-->
    <VCode @change="changeCode" @click="refresh" ref="vcode_Ref"></VCode>
    <Input type="text" v-model="inputValue" @change="valueChange">
      <template #prepend>验证码</template>
      <template #suffix>
        <VCode @change="changeCode" @click="refresh" ref="vcodeRef"></VCode>
      </template>
    </Input>
    <!-- <div class="vcode-input">
      <span>验证码：</span>
      <Input type="text" v-model="inputValue" @change="valueChange" />

      <VCode @change="changeCode" @click="refresh" ref="vcodeRef"></VCode>
    </div> -->

    <span>{{ vcodeMessage }}</span>
    <!-- <Canvas></Canvas> -->
  </div>
</template>

<script>
import Countdown from "./Countdown/Countdown.vue";
import Timer from "./Timer/Timer.vue";
import DivideList from "./DivideList/DivideList.vue";
import VCode from "./VCode/VCode.vue";
import Canvas from "./Canvas/Canvas.vue";
import Input from "./Input/Input.vue";
export default {
  name: "Demo",
  components: {
    Countdown,
    Timer,
    DivideList,
    VCode,
    Canvas,
    Input,
  },
  data() {
    return {
      time: 865874, // 秒
      divideList: [
        {
          text: "待发货",
          value: "101",
          isDot: true,
        },
        {
          text: "待收货",
          value: "20",
          num: 2,
        },
        {
          text: "已收货",
          value: "30",
        },
      ],
      inputValue: "", // 验证码输入框
      vcode: "",
      vcodeMessage: "",
    };
  },

  methods: {
    startTimer() {
      this.$refs.timerRef && this.$refs.timerRef.startTimer();
    },
    stopTimer() {
      this.$refs.timerRef && this.$refs.timerRef.stopTimer();
    },
    resetTimer() {
      this.$refs.timerRef && this.$refs.timerRef.resetTimer();
    },
    endTimer(e) {
      //   alert(`计时结束，时间${e.totalSeconds}秒`);
    },

    changeCode(value) {
      this.vcode = value;
      this.vcodeMessage = "";
      console.log("value-->", value);
    },
    refresh() {
      this.$refs.vcodeRef && this.$refs.vcodeRef.draw();
      this.vcodeMessage = "";
    },
    valueChange(value) {
      if (value.trim() && value == this.vcode) {
        this.vcodeMessage = "验证码正确";
      } else {
        this.vcodeMessage = "验证码错误";
      }
    },
  },
};
</script>

<style scoped>
.vcode-input {
  display: flex;
  align-items: center;
}
</style>
